﻿<template>
  <div class="container">
    <div class="effect-sh">
      <canvas ref="effect"></canvas>
    </div>
    <div class="d">

    </div>

  <!--<div class="login">
    <img src="@/assets/hero/ywy_rw.png"/>
  </div>-->
    <!--<div class="content">你的撒旦</div>-->
    <!--<div class="content">
  <div class="top"></div>-->
    <!-- 登录框 -->
    <!--<div class="login"></div>
  </div>-->

  </div>
</template>

<script lang="ts">
  import { Pass } from '@/common/three/pass';
  import { defineComponent, reactive, ref, watch, toRefs, onMounted } from "vue";
  import { getApp } from "@/common/hooks";
  import { WarmMessage } from '@/components/Warm/Messages';
  import { LoginPageCode } from '@/common/utils/enum.ts';

  export default defineComponent({
    name: "login",
    components: {

    },
    setup() {
      const { Route, System } = getApp(['Route']);

      console.log(window.outerHeight - ((window.outerHeight - window.innerHeight) + (window.screen.height - window.screen.availHeight)));

      const refsModule = reactive({
        effect: null as null | HTMLCanvasElement,
        music: null as null | HTMLCanvasElement,
        globe: null as null | HTMLCanvasElement
      });

      const queryCode = ref<LoginPageCode>();

      /*表单模块*/
      const formModule = reactive({
        isEmpty: true,
        isAgree: false,
        temp: {
          phone: '',
          password: '',
          code: '',
        },
        rule: {
          phone: [
            {
              regexp: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '请输入正确的电话号码格式'
            }
          ],
          password: [
            {
              regexp: /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])[0-9a-zA-Z!@#$%^&*,\\._]{6,12}$/,
              message: '密码必须包含大小写字母,数字，且长度不低于6位'
            }
          ]
        },
        handleSignIn: function () {

          // const [pass, message] = System.Utils.validateForm(this.temp, this.rule);
          // if (!pass) return WarmMessage({ text: message, type: System.Enum.HintCode.ERROR });
          // try {
          //
          // } catch (e) {
          //
          // }
        },
        handleChangeTemplate: function (code: LoginPageCode) {
          System.Utils.resetTemp(this.temp);
          this.isAgree = false;
          queryCode.value = code;
        },
        handleGetCode: async function (saveLocal: boolean = false) {
          const [pass, message] = System.Utils.validateForm(this.temp, this.rule, 'phone');
          if (!pass) return WarmMessage({ text: message, type: System.Enum.HintCode.ERROR });
          if (!saveLocal) return System.Common?.getCode(this.temp.phone);
          const lastTime = window.localStorage.getItem(System.STORE_KEY.CODE_TIME);
          if (lastTime) {
            const time = Math.abs(new Date().getTime() - new Date(lastTime).getTime()) >= 10 * 60 * 1000;
            if (!time) return WarmMessage({ text: '验证码10分之内有效!', type: System.Enum.HintCode.WARING });
            getCode(this.temp.phone);
          } else {
            getCode(this.temp.phone);
          }
          async function getCode(code: string) {
            await System.Common?.getCode(code, function () {
              window.localStorage.setItem(System.STORE_KEY.CODE_TIME, new Date().toString());
            });
          }
        },
        watchTemp: function () {
          watch([() => this.isAgree, () => this.temp], () => {
            const basePass = (this.temp.code.trim() && this.temp.password.trim() && this.temp.phone.trim());
            if (queryCode.value === LoginPageCode.LOGIN) {
              this.isEmpty = !basePass;
            } else {
              this.isEmpty = !(basePass && this.isAgree);
            }
          }, { deep: true });
        }
      });

      /*协议模块*/
      const popupModule = reactive({
        show: false,
        component: '',
        handleOpen: function (component: 'Agreement' | 'Policy') {
          this.show = !this.show;
          this.component = component;
        },
        onConfirm: function () {
          formModule.isAgree = true;
        }
      });

      onMounted(() => {
        new Pass(refsModule.effect!);
      });

      (() => {
        watch(() => Route?.query.code, () => formModule.handleChangeTemplate((Route as any).query.code), {
          immediate: true
        });
        formModule.watchTemp();
      })();

      return {
        ...toRefs(refsModule),
        queryCode,
        LoginPageCode,
        formModule,
        popupModule
      }
    }
  })</script>

<style lang="scss" scoped>
  @keyframes hide {
    0% {
      opacity: .4;
    }

    10% {
      opacity: 0;
    }

    50% {
      opacity: 0;
    }

    90% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  .container {
    height: 100vh;
    overflow: hidden;

    .d {
      height: 80Px;
      background-color: orangered;
    }

    .effect-sh {
      height: 50%;
      width: 100%;
      overflow: hidden;
      position: relative;

      &::after {
        /* content: "";
        position: absolute;
        left: 0;
        height: 100%;
        width: 100%;
        background: url("@/assets/background/sh.jpg") no-repeat;
        background-position: center;
        background-size: cover;
        z-index: -1;*/
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        min-width: 1920Px;
        background: url("@/assets/background/sh.jpg") no-repeat;
        background-position: center;
        background-size: cover;
        z-index: -1;
      }

      canvas {
        opacity: 0.4;
        //opacity: 0;
        /*animation-name: hide;
        animation-duration: .2s;
        animation-timing-function: initial;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 2s;*/
      }
    }

    .login {
      img {
        width: 120Px;
      }
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      overflow-y: scroll;

      .effect {
        height: 80%;
      }

      .login {
        background-color: #fff;
        height: 20%;
        width: 100%;
        background-color: peru;
      }
    }
  }
</style>
